<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/">
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>


</head>
<body>

<!-- 修改市场活动备注的模态窗口 -->
<div class="modal fade" id="editRemarkModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 40%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改备注</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <%-- 备注的id --%>
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label for="edit-noteContent" class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-noteContent"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="edit()">更新</button>
            </div>
        </div>
    </div>
</div>


<!-- 返回按钮 -->
<div style="position: relative; top: 35px; left: 10px;">
    <a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left"
                                                                         style="font-size: 20px; color: #DDDDDD"></span></a>
</div>

<!-- 大标题 -->
<div style="position: relative; left: 40px; top: -30px;">
    <div class="page-header">
        <h3>市场活动-发传单 <small>2020-10-10 ~ 2020-10-20</small></h3>
    </div>

</div>

<br/>
<br/>
<br/>

<!-- 详细信息 -->
<div style="position: relative; top: -70px;">
    <div style="position: relative; left: 40px; height: 30px;">
        <div style="width: 300px; color: gray;">所有者</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${activity.userName}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">名称</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${activity.name}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>

    <div style="position: relative; left: 40px; height: 30px; top: 10px;">
        <div style="width: 300px; color: gray;">开始日期</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${activity.startDate}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">结束日期</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${activity.endDate}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 20px;">
        <div style="width: 300px; color: gray;">成本</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${activity.cost}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 30px;">
        <div style="width: 300px; color: gray;">创建者</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;">
            <b>${activity.createBy}&nbsp;&nbsp;</b><small
                style="font-size: 10px; color: gray;">${activity.createTime}</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 40px;">
        <div style="width: 300px; color: gray;">修改者</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;">
            <b>${activity.editBy}&nbsp;&nbsp;</b><small
                style="font-size: 10px; color: gray;">${activity.editTime}</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 50px;">
        <div style="width: 300px; color: gray;">描述</div>
        <div style="width: 630px;position: relative; left: 200px; top: -20px;">
            <b>
                ${activity.description}
            </b>
        </div>
        <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
</div>

<!-- 备注 -->
<div style="position: relative; top: 30px; left: 40px;">
    <div class="page-header">
        <h4>备注</h4>
    </div>


    <div id="remarkList"></div>

    <div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
        <form id="dataForm" role="form" style="position: relative;top: 10px; left: 10px;">
            <textarea id="save-noteContent" class="form-control" style="width: 850px; resize : none;" rows="2"
                      placeholder="添加备注..."></textarea>
            <p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
                <button id="cancelBtn" type="button" class="btn btn-default">取消</button>
                <button type="button" class="btn btn-primary" onclick="save()">保存</button>
            </p>
        </form>
    </div>
</div>
<div style="height: 200px;"></div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js "></script>
<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">

    //默认情况下取消和保存按钮是隐藏的
    var cancelAndSaveBtnDefault = true;

    $(function () {
        document.onkeydown = function (e) {
            var ev = document.all ? window.event:e;
            if(ev.keyCode == 13){
                save();
                if($('#editRemarkModal').css('display')=="block"){
                    edit();
                }
            }
        }

        $("#save-noteContent").focus(function () {
            if (cancelAndSaveBtnDefault) {
                //设置remarkDiv的高度为130px
                $("#remarkDiv").css("height", "130px");
                //显示
                $("#cancelAndSaveBtn").show("2000");
                cancelAndSaveBtnDefault = false;
            }
        });

        $("#cancelBtn").click(function () {
            //显示
            $("#cancelAndSaveBtn").hide();
            //设置remarkDiv的高度为130px
            $("#remarkDiv").css("height", "90px");
            cancelAndSaveBtnDefault = true;
        });

        initRemarkList()
    });
    // 获取域对象中的数据
    var activityId = '${activity.id}';
    var userName = '${activity.userName}';

    // 加载备注列表
    function initRemarkList() {
        $.ajax('activityRemark/list', {
            type: 'get',
            data: {
                activityId: activityId
            },
            success: function (res) {
                if (res.code == 0) {
                    var str = '';
                    $.each(res.data, function () {
                        str += '<div class="remarkDiv" style="height: 60px;">';
                        str += '<img title="'+ userName +'" src="image/user-thumbnail02.png" style="width: 30px; height:30px;">';
                        str += '<div style="position: relative; top: -40px; left: 40px;">';
                        str += '<h5>'+ this.noteContent +'&emsp;&emsp;----来自 (' + this.createBy + ')</h5>';
                        str += '<small style="color: gray;">' + this.createTime + ' 由 <span style="color: #206ae1">' + this.createBy + '</span> 添加 </small>';
                        str += '<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">';
                        str += '<a class="myHref" href="javascript:openEdit(\'' + this.id + '\');"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>';
                        str += '&nbsp;&nbsp;&nbsp;&nbsp;';
                        str += '<a class="myHref" href="javascript:remove(\'' + this.id + '\');"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>';
                        str += '</div></div></div>';
                    });
                    $('#remarkList').html(str)

                    $(".remarkDiv").mouseover(function () {
                        $(this).children("div").children("div").show();
                    });

                    $(".remarkDiv").mouseout(function () {
                        $(this).children("div").children("div").hide();
                    });

                    $(".myHref").mouseover(function () {
                        $(this).children("span").css("color", "red");
                    });

                    $(".myHref").mouseout(function () {
                        $(this).children("span").css("color", "#E6E6E6");
                    });
                }
            }
        })
    }

    function save(){
        $.ajax('activityRemark/save', {
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({
                noteContent: $('#save-noteContent').val(),
                activityId: activityId,
            }),
            beforeSend: function () {
                var noteContent = $('#save-noteContent').val();
                if (!noteContent) {
                    return false;
                }
            },
            success: function (res) {
                if(res.code == 0){
                    cancel();
                    initRemarkList();
                }
            }
        })
    }
    
    function remove(id) {
        if(confirm("确定删除数据吗？")){
            $.ajax('activityRemark/delete/' + id, {
                type: 'delete',
                success: function (res) {
                    if(res.code == 0){
                        initRemarkList();
                    }
                }
            });
        }
    }

    function openEdit(id) {
        $.ajax('activityRemark/find/' + id, {
            type: 'get',
            success: function (res) {
                if(res.code == 0){
                    $('#edit-id').val(res.data.id);
                    $('#edit-noteContent').val(res.data.noteContent);
                    $('#editRemarkModal').modal('show');
                }
            }
        })
    }

    // 修改
    function edit() {
        $.ajax('activityRemark/edit', {
            type: 'put',
            contentType: 'application/json',
            data: JSON.stringify({
                id: $('#edit-id').val(),
                noteContent: $('#edit-noteContent').val(),
            }),
            beforeSend: function () {
                var noteContent = $('#edit-noteContent').val();
                if (!noteContent) {
                    alert("内容为空");
                    return false;
                }
            },
            success: function (res) {
                if (res.code == 0) {
                    $('#editRemarkModal').modal('hide');
                    initRemarkList();
                } else {
                    alert(res.message);
                }
            }
        })
    }
    
    function cancel(){
        //显示
        $("#cancelAndSaveBtn").hide();
        //设置remarkDiv的高度为130px
        $("#remarkDiv").css("height", "90px");
        cancelAndSaveBtnDefault = true;
        $('#dataForm')[0].reset();
    }
</script>
</body>
</html>